@import url('../assets/config.less');
@FSW: 375/100;
.chatRoom {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  .body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: unit(((50+30) / @FSW), vw);
    overflow-y: scroll;
    @media screen and(min-width:1024px) {
      bottom: 80px;
    }
  }
}
.footer {
  font-size: 0;
  position: absolute;
  // bottom: unit((30 / @FSW), vw);;
  bottom: 0;
  left: 0;
  right: 0;
  height: unit((150 / @FSW), vw);
  padding-left: unit((10 / @FSW), vw);
  padding-right: unit((10 / @FSW), vw);
  border-top: 1px solid #ccc;
  background-color: #fff;
  @media screen and(min-width:1024px) {
    min-height: 150px;
    padding-left: 10px;
    padding-right: 10px;
  }
  // .input-msg {
  //   vertical-align: middle;
  //   margin-top: unit((8 / @FSW), vw);
  //   margin-bottom: unit((8 / @FSW), vw);
  //   height: unit((34 / @FSW), vw);
  //   width: unit(((245+40) / @FSW), vw);
  //   padding: unit((6 / @FSW), vw) unit((10 / @FSW), vw);
  //   border: none;
  //   background: none;
  //   background-color: #eee;
  // }
  .input-box {
    flex: 1 1 auto;
    padding: unit((8 / @FSW), vw) unit((12 / @FSW), vw);
    @media screen and(min-width:1024px) {
      padding: 8px 12px;
    }
    // background:green;
    .input-msg {
      display: block;
      width: 100%;
      font-size: unit((16 / @FSW), vw);
      line-height: unit((34 / @FSW), vw);
      padding: 0 unit((16 / @FSW), vw);
      border: none;
      border-radius: unit((8 / @FSW), vw);
      background-color: @baseGrey2;
      @media screen and(min-width:1024px) {
        font-size: 16px;
        line-height: 34px;
        padding: 0 16px;
      }
    }
  }
  .btn {
    flex: 0 0 auto;
    font-size: unit((16 / @FSW), vw);
    vertical-align: middle;
    @media screen and(min-width:1024px) {
      font-size: 16px;
    }

    &.btn-switch {
      width: unit((30 / @FSW), vw);
      height: unit((30 / @FSW), vw);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      @media screen and(min-width:1024px) {
        width: 30px;
        height: 30px;
      }
    }
    &.btn-sMsg {
      &:disabled {
        background: rgba(128, 128, 128, 1);
      }
      width: unit((60 / @FSW), vw);
      height: unit((32 / @FSW), vw);
      margin-right: unit((12 / @FSW), vw);
      border-radius: 4px;
      background: rgba(22, 93, 255, 1);
      color: #fff;
      @media screen and(min-width:1024px) {
        width: 60px;
        height: 32px;
        margin-right: 12px;
      }
    }
    &.btn-sZan {
      width: unit((30 / @FSW), vw);
      height: unit((30 / @FSW), vw);
      border-radius: 50%;
      background: linear-gradient(
        179.43deg,
        rgba(255, 131, 38, 1) 0.5%,
        rgba(255, 49, 68, 1) 99.52%
      );
      color: #fff;
      @media screen and(min-width:1024px) {
        width: 30px;
        height: 30px;
      }
    }
    &.btn-img {
      width: unit((50 / @FSW), vw);
      height: unit((50 / @FSW), vw);
      @media screen and(min-width:1024px) {
        width: 50px;
        height: 50px;
      }
    }
  }
}
.list {
  height: 90%;
  overflow-y: scroll;
  .addScrollbar();
  padding-left: unit((8 / @FSW), vw);
  padding-right: unit((8 / @FSW), vw);
  @media screen and(min-width:1024px) {
    padding-left: 8px;
    padding-right: 8px;
  }
  .item {
    font-size: 0;
    line-height: 22/14;
    margin-top: unit((8 / @FSW), vw);
    @media screen and(min-width:1024px) {
      margin-top: 8px;
    }
    .name {
      font-size: unit((14 / @FSW), vw);
      @media screen and(min-width:1024px) {
        font-size: 14px;
      }
    }
    .content {
      font-size: unit((14 / @FSW), vw);
      @media screen and(min-width:1024px) {
        font-size: 14px;
      }
    }
    .img {
      vertical-align: middle;
      width: unit((32 / @FSW), vw);
      @media screen and(min-width:1024px) {
        width: 32px;
      }
    }
  }
}

.zan-box {
  position: absolute;
  right: 3vw;
  bottom: 100%;
  width: 20vw;
  height: 10vh;
  @media screen and(min-width:1024px) {
    right: 3%;
    width: 20px;
    height: 10px;
  }
}

.btnSign {
  position: absolute;
  top: unit((50 / @FSW), vw);
  right: 0;
  width: unit((54 / @FSW), vw);
  height: unit((54 / @FSW), vw);
  @media screen and(min-width:1024px) {
    top: 50px;
    width: 54px;
    height: 54px;
  }
}
